<template>
  <div id="header">
    <div id="header_top">
      <div id="h_link_top">
      <a href="javascript:void(0)">Order Notice</a>
      <a href="javascript:void(0)">News</a>
      <a href="javascript:void(0)">Help Center</a>
    </div>
    <div id="h_nav">
      <div id="logo_box">
        <div id="logo_l">
          <a href="javascript:void(0)" class="logo"
            ><img
              src="/img/icon/icon_logo.svg"
              alt="Okmarts.com Online Store, Refrigeration Compressor Price, Okmarts Logo"
          /></a>
        </div>
        <div id="logo_r">
          <a href="#" rel="" ><svg
              t="1675974496828"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2383"
              width="20"
              height="20"
            >
              <path
                d="M66.488889 211.781818h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485 0-27.397172-22.768485-49.648485-50.980202-49.648485H66.488889C38.341818 112.484848 15.508687 134.723232 15.508687 162.133333s22.833131 49.648485 50.980202 49.648485z m891.009293 248.242424H66.488889C38.277172 460.024242 15.508687 482.262626 15.508687 509.672727s22.768485 49.648485 50.980202 49.648485h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485-0.012929-27.410101-22.923636-49.648485-50.993131-49.648485z m0 351.63798H66.488889c-28.134141 0-50.980202 22.238384-50.980202 49.648485s22.833131 49.648485 50.980202 49.648485h891.022222c28.198788 0 50.980202-22.238384 50.980202-49.648485-0.012929-27.397172-22.781414-49.648485-50.993131-49.648485z m0 0"
                p-id="2384"
                fill="#2c2c2c"
              ></path></svg><span>Catalogue</span>
          </a>
          <div id="menu_hover" @mouseover="menu='menu_f'" @mouseout="menu='menu_r'"></div>
        </div>
      </div>
      <div id="h_nav_search">
        <input type="text" placeholder="Key Word/Part Number"/><button>
          <svg
            t="1675970844674"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2704"
            width="18"
            height="18"
          >
            <path
              d="M474.453333 884.053333c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6z m0-68.266666c187.733333 0 341.333333-153.6 341.333334-341.333334s-153.6-341.333333-341.333334-341.333333-341.333333 153.6-341.333333 341.333333 153.6 341.333333 341.333333 341.333334z m252.586667 54.613333c-13.653333-13.653333-10.24-37.546667 3.413333-47.786667s37.546667-10.24 47.786667 3.413334l64.853333 78.506666c13.653333 13.653333 10.24 37.546667-3.413333 47.786667s-37.546667 10.24-47.786667-3.413333l-64.853333-78.506667z"
              fill="#ffffff"
              p-id="2705"
            ></path>
          </svg>
        </button>
      </div>
      <div id="h_nav_sopping">
        <a href="javascript:void(0)"
          ><svg
            t="1675971528767"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1286"
            width="24"
            height="24"
          >
            <path
              d="M765.866667 305.92c-116.48 0-173.866667-26.88-227.2-106.666667a32 32 0 0 1 53.333333-35.413333c36.693333 55.253333 69.12 78.293333 173.866667 78.293333a32 32 0 0 1 0 64z"
              p-id="1287"
            ></path>
            <path
              d="M512 618.666667a309.333333 309.333333 0 1 1 309.333333-309.333334A309.546667 309.546667 0 0 1 512 618.666667z m0-554.666667a245.333333 245.333333 0 1 0 245.333333 245.333333A245.546667 245.546667 0 0 0 512 64z"
              p-id="1288"
            ></path>
            <path
              d="M301.226667 349.226667a353.92 353.92 0 0 1-155.52-32.64 32 32 0 1 1 28.586666-57.173334c69.333333 34.56 180.053333 34.56 263.68 0 50.56-21.333333 85.333333-52.266667 97.066667-88.106666a32 32 0 0 1 60.586667 20.693333c-18.133333 54.613333-64 98.56-133.12 128a429.44 429.44 0 0 1-161.28 29.226667zM837.333333 1024H186.666667A80 80 0 0 1 106.666667 944 389.76 389.76 0 0 1 496 554.666667h32A389.76 389.76 0 0 1 917.333333 944 80 80 0 0 1 837.333333 1024z m-341.333333-405.333333A325.76 325.76 0 0 0 170.666667 944a16.213333 16.213333 0 0 0 16 16h650.666666a16.213333 16.213333 0 0 0 16-16A325.76 325.76 0 0 0 528 618.666667z"
              p-id="1289"
            ></path>
            <path
              d="M714.666667 874.666667h-106.666667a32 32 0 0 1 0-64h106.666667a32 32 0 0 1 0 64z"
              p-id="1290"
            ></path></svg><span>Log In</span></a
        ><a href="javascript:void(0)"
          ><svg
            t="1675971397792"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1011"
            width="24"
            height="24">
            <path
              d="M699.15 34.62c198.09 0 325.06 158.85 325.06 372.63 0 165.9-150.12 348.61-445.89 553.91-39.77 27.54-92.45 27.54-132.22 0C150.33 755.86 0.21 573.16 0.21 407.26c0-213.78 126.96-372.63 325.05-372.63 71.54 0 120.06 25 186.94 81.71 66.9-56.7 115.41-81.72 186.95-81.72z m0 75.78c-49.72 0-84.31 18.23-140.35 66.05-2.6 2.22-17.28 14.85-21.53 18.46-14.47 12.25-35.66 12.25-50.13 0-4.25-3.62-18.93-16.24-21.53-18.46-56.04-47.82-90.63-66.05-140.35-66.05C174.03 110.4 77 231.34 77 405.86c0 133.08 136.23 298.25 413.16 489.76 13.26 9.15 30.81 9.15 44.08 0C811.17 704.13 947.4 538.95 947.4 405.86c0.01-174.53-97.01-295.46-248.25-295.46z m0 0"
              fill="#333333"
              p-id="1012"
            ></path></svg><span>Favorites</span></a><a href="javascript:void(0)" rel=""><svg
            t="1675971466383"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1367"
            width="24"
            height="24">
            <path
              d="M993.34853 132.205377c21.370157 22.498581 30.996714 53.864779 27.062209 86.718899l-57.369884 305.922783c-6.281228 47.593536-52.227066 86.129721-104.703783 86.129721l-491.034278 33.702935c-0.948675 0.259637-2.047141 0.259637-2.846026 0.259637-18.893615 0-34.931219-13.640951-36.289323-31.476044-1.388062-18.823713 13.710853-34.901261 33.553144-36.389183l493.630653-33.952586c18.094731-0.149791 33.293506-13.381313 35.370605-28.520172l57.369884-305.882839c1.348117-11.454005-2.047141-23.996489-9.267059-31.655793a23.731859 23.731859 0 0 0-17.535512-7.369709H291.308918c-20.131886 0-36.459085-15.238719-36.459086-33.912641 0-18.70388 16.47699-33.952586 36.459086-33.952586h630.120047c27.871078 0 53.285588 10.754981 71.919565 30.377578z m-83.513374 580.639147c16.556879 0 36.469072 17.355763 36.469071 36.31928 0 18.673922-16.197381 36.469072-36.469071 36.469072H318.920359c-52.516661 0-98.572345-43.469296-104.953434-92.850336L152.223149 287.478541 117.142139 97.993154c-2.186946-16.636767-18.384327-24.945164-34.162293-24.945164H36.624581c-20.131886 0-36.429127-20.311635-36.429128-39.015516 0-18.594034 16.447032-33.912642 36.469072-33.912641h46.315321c53.02595 0 99.740714 33.912642 107.210283 97.883307l33.912641 189.485387 61.923525 396.326536c2.047141 15.787952 17.395707 29.029461 32.744273 29.029461h591.104532-0.039944zM291.938039 948.275748s0 40.29373 0 0c0-40.283744 32.654399-72.938143 72.938143-72.938143s72.938143 32.654399 72.938143 72.938143-32.654399 72.938143-72.938143 72.938143-72.938143-32.654399-72.938143-72.938143z m437.608886 0s0 40.29373 0 0c0-40.283744 32.654399-72.938143 72.938143-72.938143s72.938143 32.654399 72.938143 72.938143-32.654399 72.938143-72.938143 72.938143-72.938143-32.654399-72.938143-72.938143z m0 0"
              fill="#333333"
              p-id="1368"></path></svg><span>Cart</span></a>
      </div>
    </div>
    </div>
    
    <div :class="['menu',menu]" @mouseover="menu='menu_f'" @mouseout="menu='menu_r'" >
      <div class="menu_context">

      </div>
      <div class="menu_close" @click.self="menu=null">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      menu:'menu_r'
    }
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
@import "../less/color";
@import "../less/gobal.less";
#header{
  width: 100%;
  height: 105px;
}
#header_top {
  z-index: 100;
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid @border-color-base;
  background: @background-color-base;
  border-top: 4px solid @color-primary;
}

#h_link_top {
  font-size: 12px;
  padding: 4px 0 12px;
  font-family: "Microsoft Yahei", sans-serif;
  display: flex;
  justify-content: flex-end;
  a {
    line-height: 25px;
    margin-left: 25px;
    transition: 0.3s;
  }
  a:hover {
    color: @color-primary;
  }
}

#h_nav {
  box-sizing: border-box;
  height: 40px;
  display: flex;
  div,input,button{
    height: 40px;
    box-sizing: border-box;
  }
  a{
    display: flex;
    align-items: center;
  }
  a:hover {
    color: @color-primary;
  }
  span{
    margin-left: 5px;
  }
}

#logo_box{
  display: flex;
  align-items: center;
  #logo_l{
    margin-right: 20px;
  }
  #logo_r{
    position: relative;
  }
  img{
      width: 140px;
  }
  div{
    height: auto;
  }
}
#h_nav_search{
  display: flex;
  align-items: center;
  input{
    width: 85%;
    border:1px solid @border-color-base;
    color: @color-text-secondary;
    outline:0 ;
    padding:10px ;
    border-radius: 4px 0px 0px 4px;
    transition: .4s;
  }
  input:hover,input:focus{
    border: 1px solid @color-primary;
  }
  button{
    width: 15%;
    background: @color-primary;
    border: 0px ;
    border-radius: 0px 4px 4px 0px;
  }
}
#h_nav_sopping{
  display: flex;
  height: 20px;
  line-height: 20px;
}
.menu_r{
  position: relative;
}
.menu_f{
  position: fixed;
}
.menu{
  top: 105px;
  width: 275px;
  height: 550px;
  background: white;
  border: 1px solid @border-color-base; 
  border-radius: 4px;
}
#menu_hover{
  position: absolute;
  top: 0;
  width: 100%;
  height:  calc(100% + 27px ) !important;; 
}
@media screen and (min-width:1440px) {
  .menu{
    left: 25px;
  }
  #h_link_top{
    margin: 0 25px 5px;
  }
  #h_nav{
    justify-content: space-between;
    padding: 0 25px;
    margin: 0 0 15px;
  }
  #h_nav_search{
    width: 40%;
  }
  #h_nav_sopping{
    a{
      margin-left: 30px;
    }
  }
}
@media screen and (min-width: 1280px) and (max-width: 1440px) {
  .menu{
    left: 50px;
  }
  #h_link_top{
    margin: 0 50px 5px;
  }
  #h_nav{
    justify-content: space-between;
    padding: 0 50px;
    margin: 0 0 15px;
  }
  #h_nav_search{
    width: 40%;
  }
  #h_nav_sopping{
    a{
      margin-left: 30px;
    }
  }
}
@media screen and (min-width:985px) and (max-width: 1280px) {
  .menu{
    left: 50px;
    display: none;
  }
  .menu_f{
    display: inline-block;
  }
  #h_link_top{
    margin: 0 50px 5px;
  }
  #h_nav{
    justify-content: space-between;
    padding: 0 50px;
    margin: 0 0 15px;
  }
  #h_nav_search{
    width: 40%;
  }
  #h_nav_sopping{
    a{
      margin-left: 30px;
    }
    span{
      display: none;
    }
  }
}
@media screen and (min-width:760px) and (max-width:985px) {
  .menu{
    left: 50px;
    display: none;
  }
  .menu_f{
    display: inline-block;
  }
  #h_link_top{
    margin: 0 50px 5px;
  }
  #h_nav{
    justify-content: space-between;
    padding: 0 50px;
    margin: 0 0 15px;
  }
  #h_nav_search{
    width:30%;
  }
  #h_nav_sopping{
    a{
      margin-left: 30px;
    }
    span{
      display: none;
    }
  }
}
@media screen and (min-width:690px) and (max-width:760px){
  #header{
    height: 145px;
  }
  .menu{
    left: 50px;
    display: none;
  }
  .menu_f{
    display: inline-block;
  }
  #h_link_top{
    margin: 0 50px 5px;
  }
  #logo_r span{
    display: none;
  }
  #h_nav{
    justify-content: space-between;
    padding: 0 50px;
    margin: 0 0 15px;
  }
  #h_nav_search{
    width:100%;
    position: absolute;
    bottom: -40px;
    left: 0px;
  }
  #h_nav_sopping{
    a{
      margin-left: 30px;
    }
    span{
      display: none;
    }
  }
}
@media screen and (max-width:690px){
  #header{
    height: 145px;
  }
  .menu{
    position: fixed;
    width: 0;
    height: 100vh;
    top: 0;
    left: -6px;
    border-radius: 0px;
    background: rgba(33, 33, 33, .3);
    z-index: 101;
    transition: .2s;
    overflow: hidden;
  }
  .menu_context{
    display: inline-block;
    width: 70%;
    height: 100%;
    background: white;
  }
  .menu_close{
    display: inline-block;
    width: 30%;
    height: 100%;
  }
  .menu_f{
    left: 0;
    width: 100%;
  }
  #h_link_top{
    margin: 0 0px 5px;
  }
  #logo_l{
    order: 2;
  }
  #logo_r{
    order: 1;
  }
  #logo_r span{
    display: none;
  }
  #h_nav{
    justify-content: space-between;
    padding: 0 10px;
    margin: 0 0 15px;
  }
  #h_nav_search{
    width:100%;
    position: absolute;
    bottom: -40px;
    left: 0px;
  }
  #h_nav_sopping{
    a{
      margin-left: 10px;
    }
    span{
      display: none;
    }
  }
}
</style>